<template>
    <div style="position: relative;">
        <div class="detail" v-if="postItem!=[]">
            <div class="title">
                <div v-text="postItem.title"></div>
                <div>
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>{{postItem.thumbsup}}</span>
                    <i class="fa fa-commenting-o"></i>
                    <span>{{postItem.replycount}}</span>
                </div>
            </div>
            <div class="content">
                <div class="user">
                    <div>
                        <img v-if="postItem.userimg == ''"
                             src="http://rainbow.paint-future.com/static/m/imgs/s-head.png"
                             alt="">
                        <img v-if="postItem.userimg!=''" :src="postItem.userimg | RIH" alt="">
                        <span>{{postItem.username}}</span>
                    </div>
                    <span>{{postItem.addtime}}</span>
                </div>
                <p>{{postItem.content}}</p>
                <div class="postImg" v-for="postImg in postItem.img">
                    <img :src="postImg.orikey | RIH" alt="">
                    <h4>{{postImg.title}}</h4>
                    <p>{{postImg.introduce}}</p>
                </div>
            </div>
            <div class="reply">
                <div class="replyContent" >
                    <div>共{{length}}条精彩回复</div>
                    <section v-for="reply in postItem.reply">
                        <div class="replyPImg">
                            <img v-if="reply.userimg == ''" src="http://rainbow.paint-future.com/static/m/imgs/s-head.png" alt="">
                            <img v-if="reply.userimg !=''" :src="reply.userimg | RIH" alt="">
                        </div>
                        <div class="replyPContent">
                            <div>{{reply.username}}</div>
                            <div>{{reply.replytime}}</div>
                            <div>{{reply.replycontent}}</div>
                        </div>
                    </section>
                </div>
                <p style="text-align:center;">没有更多内容！</p>
            </div>
        </div>
        <div class="detailBottom">
            <ul>
                <li>
                    <img src="../../assets/收藏.png" alt="">
                    <span>收藏</span>
                </li>
                <li>
                    <img src="../../assets/评论.png" alt="">
                    <span>评论</span>
                </li>
                <li>
                    <img src="../../assets/点赞.png" alt="">
                    <span>点赞</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import bus from '../../js/bus.js'

    export default {
        name: "postDetail",
        data: function () {
            return {
                postItem: [],
                length:0
            }
        },
        created() {
            this.index = this.$route.query.key
            var that = this
            this.$http.get('/rainApi/subject/getRecommendSubjectAjax').then(function (data) {
                that.postItem = data.data.data[that.index]
                that.length = data.data.data[that.index].reply.length
            })
            bus.$emit('hidden')
        }
    }
</script>

<style scoped>
    .title {
        width: 100vw;
        background: #31343b;
        text-align: left;
        color: white;
        box-sizing: border-box;
        padding: 18vw 0 5vw 3vw;
        font-size: 5vw;
    }

    .title > div:first-child {
        margin-bottom: 5vw;
    }
    .content{
        padding: 3vw;
        color: #bdc1ca;
        font-size: 3vw;
    }
    .user{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 3vw;
        border-bottom: 1px dashed #000;
    }
    .user img{
        width: 10vw;
        height: 10vw;
        margin-right: 2vw;
    }
    .user>div>span{
        vertical-align: 3vw;
    }
    .content >p{
        font-size: 4vw;
    }
    .postImg img{
        width: 100%;
    }
    .postImg h4{
        text-align: center;
        margin-bottom: 0;
    }
    .postImg p{
        color:#757e91;
        line-height: 6vw;
    }
    .reply{
        width: 100%;
        background: #f0f0f0;
        box-sizing: border-box;
        border: 1px solid #f0f0f0;
    }
    .replyContent{
        margin: 4vw 0vw 8vw;
        background: white;
        padding: 0 3vw;
    }
    .replyContent>div{
        height: 14vw;
        line-height: 14vw;
        border-bottom: 1px solid #f0f0f0;
    }
    .reply section{
        display: flex;
        height: 30vw;
        margin: 4vw 0 ;
        border-bottom: 1px solid #f0f0f0;
    }
    .reply section div{
        margin-bottom: 2vw;
    }
    .replyPImg img{
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        margin-right: 4vw;
    }
    .detailBottom{
        position: absolute;
        line-height: 20vw;
        bottom: -20vw;

    }
    .detailBottom ul{
        display: flex;
        width: 100vw;
        justify-content: space-around;
    }
    .detailBottom ul li{
        display: flex;
        align-items: center;
    }
    .detailBottom img{
        width: 8vw;
        height: 8vw;
        margin-right: 2vw;
    }
</style>
